<template>
  <FormItem v-if="type == 'checkbox'" :label-width="labelWidth">
    <Checkbox :value="value" :true-value="trueValue" :false-value="falseValue" :disabled="disabled" @on-change="updateValue">
      {{ label }}
    </Checkbox>
  </FormItem>
  <FormItem v-else :label="label" :label-width="labelWidth">
    <slot>
      <DatePicker v-if="isDate" :type="type" :value="dateValue" :readonly="readonly" :disabled="disabled" :format="dateFormat" @on-change="updateValue" />
      <RadioGroup v-else-if="type == 'radio'" :value="value" :disabled="disabled" @on-change="updateValue" :type="radioType">
        <Radio v-for="item in datas" :key="item.value" :label="item.value" @on-change="updateValue">
          <template v-if="item.icon">
            <Icon :type="item.icon" />
            <span>{{ item.text }}</span>
          </template>
          <template v-else>{{ item.text }}</template>
        </Radio>
      </RadioGroup>
      <CheckboxGroup v-else-if="type == 'checkboxs'" :value="value" :disabled="disabled" @on-change="updateValue">
        <Checkbox v-for="item in datas" :key="item.value" :label="item.value">
          <template v-if="item.icon">
            <Icon :type="item.icon" />
            <span>{{ item.text }}</span>
          </template>
          <template v-else>{{ item.text }}</template>
        </Checkbox>
      </CheckboxGroup>
      <Select v-else-if="type == 'select'" :value="value" :disabled="disabled" :placeholder="placeholder" @on-change="updateValue">
        <Option v-for="item in datas" :key="item.value" :value="item.value">{{ item.text }}</Option>
      </Select>
      <Input v-else :value="value" :readonly="readonly" :disabled="disabled" :placeholder="placeholder" @on-change="updateValue" :type="type">
        <template slot="prepend">
          <slot name="prepend"></slot>
        </template>
        <template slot="append">
          <slot name="append"></slot>
        </template>
      </Input>
    </slot>
  </FormItem>
</template>

<script>
export default {
  props: {
    label: String,
    placeholder: String,
    prop: String,
    required: {
      type: Boolean,
      default: false
    },
    labelWidth: {
      type: [Number, String],
      default: 100
    },
    value: {
      validator: v => {
        return true;
      }
    },
    type: {
      type: String,
      default: 'text',
      validator: v => true
    },
    readonly: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    datas: {
      type: Array
    },
    extra: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      dateValue: null
    };
  },
  computed: {
    isDate() {
      return this.type.includes('date') || this.type.includes('time');
    },
    trueValue() {
      return this.extra && this.extra.trueValue != undefined ? this.extra.trueValue : true;
    },
    falseValue() {
      return this.extra && this.extra.falseValue != undefined ? this.extra.falseValue : false;
    },
    radioType() {
      return this.extra.radioType;
    },
    dateFormat() {
      let format = 'yyyy-MM-dd';

      switch ((this.type || '').toLowerCase()) {
        case 'date':
          format = 'yyyy-MM-dd';

          break;

        case 'datetime':
          format = 'yyyy-MM-dd HH:mm';

          break;

        case 'time':
          format = 'HH:mm';

          break;
      }

      return format;
    }
  },
  watch: {
    value(n) {
      if (this.type.includes('date') || this.type.includes('time')) {
        this.dateValue = n ? new Date(n) : null;
      }

      this.$emit('input', n);
    }
  },
  methods: {
    updateValue(value) {
      if (value && value.target) {
        this.$emit('input', value.target.value);
      } else {
        this.$emit('input', value || '');
      }
    }
  }
};
</script>

<style lang="less" scoped>
.ivu-date-picker {
  width: 100%;
}
</style>
